<template>
  <el-date-picker
    v-model="dateRange"
    v-bind="$attrs"
    type="daterange"
    unlink-panels
    range-separator="-"
    start-placeholder="开始"
    end-placeholder="结束"
    :shortcuts="shortcuts"
    :value-format="DATE_FORMAT"
    :format="DATE_FORMAT"
    @change="handleChange"
  />
</template>

<script setup lang="ts">
import { DATE_FORMAT, getLastWeekRange, getLastMonthRange, getLastYearRange } from '@/utils/time'
import { computed } from 'vue'
const props = withDefaults(
  defineProps<{
    dateList?: [start: string, end: string]
  }>(),
  {
    dateList: () => getLastWeekRange()
  }
)

const emit = defineEmits(['update:dateList'])

const dateRange = computed({
  get() {
    return props.dateList
  },
  set(val) {
    emit('update:dateList', val)
  }
})

const shortcuts = [
  {
    text: '近一周',
    value: getLastWeekRange()
  },
  {
    text: '近一月',
    value: getLastMonthRange()
  },
  {
    text: '近一年',
    value: getLastYearRange()
  }
]

const handleChange = (arr: string[]) => {
  if (!arr) {
    dateRange.value = getLastWeekRange()
  }
}
</script>
